<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>abc-上传文件至七牛工具</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="./favicon.ico">
   <style>
       *{
           margin: 0;
           padding: 0;
       }

       html{
           height: 100%;
           height: 100%;
           overflow: hidden;
           /* opacity: 0.2; */
       }
       body{
           height: 100%;
           height: 100%;
           background-color: #eee;
           /* opacity: 0.2; */
       }
        body:after{
            content: "";
            background: url(images/bg.jpg) center center no-repeat;
            background-size: cover;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }
        .content{
           width: 100%;
           height: 100%;
        }
       .left{
           float: left;
           width: 20%;
           height: 100%;
           background: rgba(28, 183, 198, 0.6);
           /* background: #1CB7C6;
           opacity: 0.2; */
           padding: 20px 0 0 10px;
           position: relative;
       }
       .left #buckList{
           border: none;
           width: 75%;
           height: 25px;
           border-radius: 6px;
           margin-top: 10px;

       }
       .left .close{
            position: absolute;
            /* position: fixed; */
            right: 0;
            top: 0;
            color: #ffffff;
            cursor: pointer;
            padding: 10px;
            background: rgba(28, 183, 198, 1);
       }
       .left .close:active{
            background: rgb(5, 223, 243);
       }
       .right{
           /* float: left; */
           box-sizing: border-box;
           padding: 20px 0 0 25%;
       }
       .right .upFile > p{
            margin-bottom: 10px;
       }
       .right .upFile > p > span{
           color: red;
       }
       .right .upFile #container{
           /* height: 100px; */
            display: inline-block;
            padding: 25px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 1);
            overflow: hidden;
            margin-bottom: 20px;
       }
       .right .showLink #url{
            height: 22px;
            width: 280px;
            border: none;
            border-radius: 4px;
            padding-left: 4px;
       }
       .right .showLink #btn{
           border: none;
           border-radius: 6px;
           height: 22px;
           padding: 0 10px;
           color: #ffffff;
           background: rgba(28, 183, 198, 1);
           cursor: pointer;
       }
        #loading{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            text-align: center;
            display: none;
        }
        #loading > img{
            width: 75px;
            margin-top: 20%;
            margin-bottom: 10px;
        }
        #finish{
            display: none;
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 40px;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            text-align: center;
            line-height: 40px;
        }
   </style>
</head>
<body>
    <div class="content">
        <div class="left">
            <p>请选择存储空间：</p>
            <select name="chooseBucket" id="buckList" onchange="watchChange()">
                <!-- <option value="test-demo">test-demo</option>
                <option value="test-demo1">test-demo1</option>
                <option value="test-demo2">test-demo2</option>
                <option value="test-demo3">test-demo3</option> -->
            </select>
        </div>
        <div class="right">
            <div class="upFile">
                <p><span>注意：</span>选择文件直接上传，最大文件限制为：100mb</p>
                <div id="container">
                    <input type="file" id="fileToUpload">
                </div>
            </div>
            <div class="showLink">
                <input type="text" id="url" value="暂无链接 :)">
                <input type="button" id="btn" value="复制链接" onClick="copyUrl()">
                <div class="hint" style="display: none">复制成功</div>
            </div>
        </div>
        
    </div>
    <div id="loading">
        <img src="/images/loading.gif" alt="loadimg">
        <div class="loadingText">0%</div>
    </div>
    <div id="finish">
        上传成功
    </div>

<script src="http://static.landi.com/common/js/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/moxie.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/i18n/zh_CN.js"></script>
<!-- <script type="text/javascript" src="http://jssdk.demo.qiniu.io/dist/qiniu.min.js"></script> -->
<script src="https://unpkg.com/qiniu-js@v1.0.19/dist/qiniu.min.js"></script>
<script src="https://libs.cdnjs.net/crypto-js/3.1.2/rollups/md5.js"></script>
<script type="text/javascript">
    var apiUrl = "https://tsdcake-admin.fivecc.cn";
    var getToken = '';      // 获取来的token
    var buckLists = '';         // 空间和域名 对象列表
    var changeBuckVal = '';     // 下拉框中的选中项
    $.post(apiUrl +'/upload', function(data){      // 获取下拉框中的选项（bucket空间）
        buckLists = data.bucketLists;
        for(var i = 0; i < buckLists.length; i++){
            for(key in buckLists[i]){
                console.log(key);
                console.log(buckLists[i][key]);
                var opt = document.createElement('option');
                $(opt).val(key);
                $(opt).html(key);
                $('#buckList').append(opt);
            }
        }
        var cookies = document.cookie.split(";");           // 读取cookie
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            var cookieVal = eqPos > -1 ? cookie.substr(eqPos+1) : cookie;
            switch (name.trim()){
                case 'selectCookie':
                    $('#buckList').val(cookieVal);
                    break;
                default: 
                    break;
            }
        }
        var selectBuck = $('#buckList');
        changeBuckVal = selectBuck.val();     //获取选中的值
        uploadFile();
    });


    //监测下拉框的变化
    function watchChange(){
        document.cookie = "selectCookie=" + $('#buckList').val() +";domain=" + document.domain;
        window.location.reload();       //避免uploadFile执行两次
    }
    //复制功能
    function copyUrl(){
        var url = document.getElementById('url');
        url.select();
        document.execCommand('Copy');
        $('.hint').fadeIn(800).fadeOut(1500);
    }

    //预加载.获取已经注册的服务器上的token（如果是已经注册好的用户，token是一个给定的值，直接在    var uploader = Qiniu.uploader({}） 中把
    function uploadFile(){      // 
        $.post(apiUrl +'/upload', {value: changeBuckVal}, function(data){       // 获取token和对应的上传域名
            getToken = data.token;
            var domainUrl = '';
            for(var i = 0; i < buckLists.length; i++){
                for(key in buckLists[i]){
                    if(key == changeBuckVal){
                        domainUrl = buckLists[i][key];
                    }
                }
            }
            var token = getToken;
            var msg = $('#msg');
            var spark = '';
            var tmp_md5 = '';
            var uploader = Qiniu.uploader({
                runtimes: 'html5,html4,flash',    //上传模式,依次退化
                browse_button: 'fileToUpload',       //上传选择的点选按钮，**必需**
                //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                //uptoken : 'xxxxxxxxxxxxxx',
                uptoken: token,
                save_key: false,        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
                domain: domainUrl,        //test-demo1
                get_new_uptoken: true,
                container: 'container',     //上传区域DOM ID，默认是browser_button的父元素，
                max_file_size: '100mb',           //最大文件体积限制
                flash_swf_url: 'js/Moxie.swf',  //引入flash,相对路径
                max_retries: 0,                   //上传失败最大重试次数
                dragdrop: true,                   //开启可拖曳上传
                drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                chunk_size: '4mb',                //分块上传时，每片的体积
                auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                init: {
                    'FilesAdded': function(up, files) {
                        plupload.each(files, function(file) {
                            // 文件添加进队列后,处理相关的事情
                        });
                    },
                    'BeforeUpload': function(up, file) {
                            // 每个文件上传前,处理相关的事情
                            // msg.append(' BeforeUpload 事件（每个文件上传前,处理相关的事情）<br />');
                    },
                    'UploadProgress': function(up, file) {
                            // 每个文件上传时,处理相关的事情
                            $('#loading').show();
                            var percent = Math.round(file.loaded / file.size * 100);        //文件上传时的进度
                            var loadingPer = $('.loadingText');
                            loadingPer.html(percent + '%');
                    },
                    'FileUploaded': function(up, file, info) {
                            // 每个文件上传成功后,处理相关的事情
                            // 其中 info 是文件上传成功后，服务端返回的json，形式如
                            // {
                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                            //    "key": "03-1519956553904.png"
                            //  }
                            var arr = file.name.split('.'); 
                            var lastName = arr[arr.length - 1];     //后缀名
                            var domain = up.getOption('domain');
                            console.log(info);
                            var res = JSON.parse(info);
                            // var res = JSON.parse(info.response);     // 最新版qiniu.js可能该成此方式
                            // json = jQuery(res);
                            console.log(domain + res.key);      //自定义key的链接
                            // alert("上传成功");
                            $('#url').val(domain +'./'+ res.key);
                            $('#loading').hide();
                            $('#finish').fadeIn(1200).fadeOut(2500);
                    },
                    'Error': function(up, err, errTip) {
                            //上传出错时,处理相关的事情<br>
                            alert('上传出错,请检查文件大小');
                            $('#loading').hide();
                    },
                    'UploadComplete': function() {
                            //队列文件处理完毕后,处理相关的事情
                    },
                    // 设置key值
                    'Key': function(up, file) {
                        // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                        // 该配置必须要在 unique_names: false , save_key: false 时才生效
                        var arr = file.name.split('.'); 
                        var lastName = arr[arr.length - 1];     //后缀名
                        var fileName = file.name.slice(0,file.name.lastIndexOf('.'));
                        var hashName = CryptoJS.MD5(fileName + Date.now());
                        console.log('hash值：');
                        console.log(CryptoJS.MD5(fileName));
                        var key = 'uploadtool' + hashName + '.' + lastName;         //key值设置为：文件名 - 时间戳 . 后缀名
                        return key;
                    }
                }
            });
        })
    }

</script>
     
</body>
</html>
<!-- 整体逻辑：发送接口到app.js获取数据（bucket_lists）——渲染页面中的列表项有缓存用缓存——发送同样的接口+选中项——获得token和domainUrl，
    进行上传文件的一系列操作 ——点击切换列表项时本地存储，刷新页面。-->
<!-- 在config中配置上传空间名和域名 -->


